<script lang="ts" setup>
import { addCollectArticle, getHealthKL, getHealthworks } from '~/api/home'

const route = useRoute()
const title = ref('志鉴详情')
const routePath = ref([{ name: '首页', path: '/' }, { name: '志鉴分类', path: '/peopleHealth/knowledge' }, { name: '志鉴详情' }])
const book = ref({})
const queryParams = reactive<{

  page: {
    rownumber: number
    pageNo: number
  }
  condition?: any[]
  positions?: string
}>(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },

    positions: '首页',
  },

)
function shareClick() {
  const currentPath = window.location.href
  navigator.clipboard.writeText(currentPath)
    .then(() => {
      ElMessage.success('已复制当前页面链接，可以去分享啦~')
    })
    .catch((err) => {
      ElMessage.error('复制失败,请稍后再试')
    })
}
const store = useUserStore()
function showLogin() {
  store.setLoginVisible(true)
}
async function onCollect(id: any) {
  try {
    const res = await addCollectArticle([dataInit.value.id])
    console.log('res', res)
    if (res.resultCode == '0011') {
      showLogin()
    }
    if (res.state == 'SUCCESS') {
      ElMessage.success('收藏成功')
    }
  }
  catch (error) {
    ElMessage.success(error)
  }
}
const dataInit = ref({})
async function getData(id: any, type: any) {
  queryParams.condition = [{ colName: 'id', ruleType: 'eq', value: id }]
  let res
  if (type == 1) {
    res = await getHealthKL(queryParams)
  }
  else if (type == 2) {
    res = await getHealthworks(queryParams)
  }

  dataInit.value = res.data[0]
  book.value = {
            bookName: dataInit.value?.title_name,
            publisherUnit: dataInit.value?.organ_name,
            author: dataInit.value?.author,
            publishDate: dataInit.value?.release_time,
            dataSource: dataInit.value?.origin,
            readNum: dataInit.value?.page_view_num,
            url: dataInit.value?.cover_file_name,
            resume: dataInit.value?.digest,
            uid: dataInit.value?.uid
  }
  console.log('dataInit', dataInit.value)
}
const siderData = ref<any[]>([])
async function getSiderList() {
  const res = await getHealthKL({

    page: {
      rownumber: 10,
      pageNo: 1,
    },
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],

    positions: '首页',
  })
  console.log('res555', res)

  siderData.value = res.data
}
function change(itemdata: any) {
  dataInit.value = itemdata
}
const router = useRouter()
function backhis() {
  router.back()
}
const { collectArticleMap } = storeToRefs(useUserStore())
onMounted(() => {
  const arr = route.params.id.split('&')

  getData(arr[0], arr[1])

  getSiderList()
})
</script>

<template>
  <div class="py-5%">
        <ClientOnly>
            <CommonPageContainer :title="title" :path="routePath">
                <div class=" px-5 ">
                    <div class="bg-#F7F4EF px-6.5 py-5 rounded-2xl min-h-600px">
                        <div class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md float-left"
                            style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                            @click="router.back()">
                            <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                                <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                            </div>
                        </div>
                        <div class=" my-2 text-1.2rem text-#AC8358 font-700 line-height-8">
                            {{ book?.bookName ?? '暂无数据' }}
                        </div>
                        <div class="my-4">
                            <span class="mr-6">发布日期：{{ book?.publishDate ?? '暂无数据' }}</span>
                            <span class="mx-6">信息来源：{{ book?.dataSource ?? '暂无数据' }}</span>
                            <span class="mx-6">阅读量：{{ book?.readNum ?? '暂无数据' }}</span>
                        </div>
                        <div grid="~  gap-10 cols-2" class="min-h-500px py-5">
                            <el-image style="width: 100%; height: 100%;" class="max-h-500px" :src="getImgUrl(book?.url)"
                                :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                :preview-src-list="[getImgUrl(book?.url)]" :initial-index="4" fit="fill">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <div>
                                <div class="text-#AC8358"><i class="i-ri:album-line h-10px w-10px m-r-15px  " />书籍基本信息
                                </div>
                                <table class="table-auto w-full my-10 " border="1 dashed black">
                                    <tbody>
                                        <tr class="h-50px">
                                            <th class="w-100px">作者</th>
                                            <th>{{ book?.author ?? '暂无数据' }}</th>
                                        </tr>
                                        <tr class="h-50px">
                                            <th>出版发行</th>
                                            <th>{{ book?.publisherUnit ?? '暂无数据' }}</th>
                                        </tr>
                                        <tr class="h-270px">
                                            <th>摘要</th>
                                            <th>{{ book?.resume ?? '暂无数据' }}</th>
                                        </tr>
                                    </tbody>
                                </table>
                                <div flex="~" class="buts">
                                    <button @click="toDetail()">在线阅读</button>
                                    <div class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                                        @click="changeArticleCollect(book.uid)">
                                        <!-- <img class="pr-12px" src="/img/black_heart.png" alt=""> -->
                                        <i class="i-ri:heart-2-line mr-12px inline-block text-20px text-#AC8358"
                                            :class="{ 'text-red': collectArticleMap[book.uid], 'text-#555': !collectArticleMap[book.uid] }" />
                                        <span>{{ collectArticleMap?.[book.uid] ? '已收藏' : '收藏' }}</span>
                                    </div>
                                    <div class="h-42px  w-100px flex cursor-pointer items-center justify-center bg-white"
                                        @click="copyUrl">
                                        <i class="i-ri:reply-line h-20px w-20px m-r-5px text-#AC8358 " />
                                        分享
                                    </div>
                                    <button>
                                        <i class="i-ri:folder-download-line h-20px w-20px m-r-5px text-#AC8358 " /><span class="text-black">下载</span></button>

                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </CommonPageContainer>
        </ClientOnly>
    </div>
</template>

<style lang="scss" scoped>
.image-slot {
    height: 100%;
}

th,
td {
    border: 1px dashed rgb(223, 189, 18);
    font-weight: 100;
}

.buts {
    & button {
        padding: 10px 15px;
        margin: 0 15px;
        color: #ddac44;
        background-color: #fff;
        border-radius: 4px;
    }

    button:nth-child(1) {
        background: linear-gradient(220.55deg, #d3c3a1 0%, #ddac44 100%);
        color: #fff;
        border: none;
    }
}
</style>
